<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>响应式</title>
    <!-- <script src="./vue.global.js"></script> -->
    <!--引入vue2开发版本的vue核心包-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>

<!--
综合案例购物车
结算后保存到本地
使用到了 v-if v-else
v-bind:class

-->
<style>
    .imgs {
        width: 20px;
        height: 20px;
    }

    .active {
        background-color: antiquewhite;
    }
</style>

<body>
    <div id="app">
        <table>
            <thead>
                <tr>
                    <td>选中</td>
                    <td>图片</td>
                    <td>单价</td>
                    <td>个数</td>
                    <td>小计</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody v-if="fruits.length != 0">
                <tr v-for="(item,index) in fruits" :key="item.id" v-bind:class="{active:item.check}">
                    <td><input type="checkbox" v-model="item.check"></td>
                    <td><img v-bind:class="{imgs: true}" v-bind:src="item.imgUrl"></td>
                    <td>{{item.price}}</td>
                    <td><button @click="item.num > 0 && item.num--">-</button><span>{{item.num}}</span><button
                            @click="item.num++">+</button></td>
                    <td>{{ item.num * item.price }}</td>
                    <td><button v-on:click="del(item.id)">删除</button></td>
                </tr>
            </tbody>
            <tbody v-else>
                <tr>
                    <td>空的</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="1" v-show="fruits.length > 0"><input type="checkbox" v-model="allOps">全选</td>
                    <td colspan="4">总价:￥{{ totalPrice }}</td>
                    <td colspan="1"><button>结算{{ totalNum }}</button></td>
                </tr>
            </tfoot>
        </table>
    </div>

    <script>
        const defaultFruits = [
            { id: 1, check: false, imgUrl: './images/image1.png', num: 0, price: 10 },
            { id: 2, check: false, imgUrl: './images/image2.png', num: 0, price: 20 },
            { id: 3, check: false, imgUrl: './images/image3.png', num: 0, price: 30 },
            { id: 4, check: false, imgUrl: './images/image4.png', num: 0, price: 40 },
        ]
        const app = new Vue({
            el: '#app',
            data: {
                fruits: JSON.parse(localStorage.getItem('fruits')) || defaultFruits
            },
            methods: {
                // 小计
                singleSum(num, price) {
                    return num * price
                },
                // 删除
                del(id) {
                    this.fruits = this.fruits.filter(item => item.id != id)
                },
            },
            computed: {
                // 使用计算属性设置全选和反选,需要使用完整写法
                allOps: {
                    get() {
                        // 全部按钮都选中
                        return this.fruits.every(item => item.check)
                    },
                    // 当修改全选按钮时，其他复选框跟着联动
                    set(ops) {
                        this.fruits.forEach(element => {
                            element.check = ops
                        });
                    }

                },
                // 统计选中的总数
                totalNum() {
                    return this.fruits.filter(item => item.check).reduce((sum, item) => sum + item.num, 0)
                },
                // 统计总价
                totalPrice() {
                    return this.fruits.filter(item => item.check).reduce((sum, item) => (sum += item.num * item.price), 0)
                }
            },
            watch: {
                fruits: {
                    // 深度监控
                    deep: true,
                    // 初始化时就监控
                    immediate: true,
                    handler(n) {
                        console.log(n)
                        // 将变化后的n存入本地
                        localStorage.setItem('fruits', JSON.stringify(n))
                    }
                }
            }
        })
    </script>

</body>

</html>